<template>
  <!-- 书籍详情页书籍分类导航栏组件 -->
  <div class="container mb-2 detailsNavigation">
    <div class="row">
      <div class="col-12 p-2 content shadow-sm">
        
        <div class="d-flex text-secondary">
          <p class="mr-4">类型：</p>
          <div class="d-flex" v-for="(v, k) in titles">
            <p class="mr-4" 
              @click="getTitle(v.eName)" 
              :class="{navigationStyle: getNavigationStyle(v.eName)}" 
              style="cursor: pointer;">
                {{v.cName}}
            </p>
          </div>
        </div>

        <hr class="my-1" />

        <div class="d-flex text-secondary">
          <p class="mr-4">类型：</p>
          <div class="d-flex">
            <p class="mr-4">Kindle</p>
            <p class="mr-4">PDF</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DetailsNavigation',
    data () {
      return {
        titles: [
          {cName: '全部', eName: 'all'},
          {cName: '科学', eName: 'science'},
          {cName: '历史', eName: 'history'},
          {cName: '名著', eName: 'masterwork'},
          {cName: '哲学', eName: 'philosophy'}
        ]
      }
    },
    methods: {
      getTitle(v) {
        sessionStorage.setItem('titleName', v);
        window.location.reload();
      }
    },
    mounted() {
      // 加载时默认加载所有书籍
      if (sessionStorage.getItem('titleName') == null) {
        sessionStorage.setItem('titleName', 'all');
      }
    },
    computed: {
      getNavigationStyle() {
        return target => {
          let flag = '';
          target == sessionStorage.getItem('titleName') ? flag = true : flag = false;
          return flag;
        }
      }
    }
  }
  
</script>

<style scoped>
  .detailsNavigation {
    margin-top: 20px;
  }
  .detailsNavigation p{
    font-size: 1em;
  }
  .content {
    background: #FFF;
  }

  .navigationStyle {
    color: #FFF;
    background-color: rgb(0, 123, 255);
    padding: .5px 5px;
    border-radius: 5px;
  }

  @media (max-width: 575px) {
    .detailsNavigation {
      margin-top: 10px;
    }
    .detailsNavigation p{
      font-size: .875em;
    }
  }
</style>